<!-- 接受任务 -->
<template>
  <van-skeleton title :row="8" :loading="loading">
    <div class="context_box">
      <div class="task_title">{{ taskInfo.title }}</div>
      <div class="task_tabs flex">
        <!-- <div class="task_tabs_in cenFlex">新任务</div> -->
        <div class="task_tabs_in cenFlex">
          <div class="img">
            <img src="@/assets/img/index_icon17.png" alt />
          </div>
          <div class="txt">截止日期为：{{ taskInfo.endTime }}</div>
        </div>
        <div class="task_tabs_in cenFlex cenFlex">
          <div class="img">
            <img src="@/assets/img/index_icon16.png" alt />
          </div>
          <div class="txt">
            {{ taskInfo.score }}积分<span v-if="taskInfo.scoreType == 1"
              >/{{ taskInfo.scoreUnit || "次" }}</span
            >
          </div>
        </div>
        <div class="task_tabs_in cenFlex" v-if="taskInfo.examine == 1">
          需要通过审核才能领取
        </div>
      </div>
      <div class="task_content">
        <div class="task_content_title">任务详情</div>
        <div class="task_content_warp">{{ taskInfo.detail }}</div>
      </div>
      <div
        v-if="taskInfo.eligibility == 2"
        class="task_btn all_btn cenFlex btnR"
        @click="getTaskFn()"
      >
        确认领取
      </div>
    </div>
  </van-skeleton>
</template>

<script>
import api from "@/api/task";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      id: this.$route.query.id,
      taskInfo: {},
      loading: true,
      isWx:false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击领取
    getTaskFn() {
      api
        .apiGetTask({
          id: Number(this.id),
        })
        .then((res) => {
          if (res.code == 0) {
            if (this.taskInfo.examine == 1) {
              this.$router.replace("/nice-register-end?type=4");
            } else {
              this.$router.go(-1);
            }
          }
        });
    },
    // 初始获取任务详情
    getInit() {
      api.apiTaskListId(this.id).then((res) => {
        this.loading = false;
        if (res.code == 0) {
          this.taskInfo = res.data.mission;
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if(localStorage.getItem('isWx')){
      this.isWx = true;
    }
    this.getInit();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.context_box {
  padding: 30px 20px;

  .task_title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
  }
  .task_tabs {
    flex-wrap: wrap;
    margin: 20px 0px;
    margin-bottom: 10px;
    .task_tabs_in {
      padding: 8px 15px;
      border-radius: 20px;
      background: #dde5ef;
      color: #203039;
      font-size: 12px;
      margin-right: 15px;
      margin-bottom: 15px;
      .img {
        width: 20px;
        margin-right: 5px;
      }
    }
  }
  .task_content {
    color: $nicegray;
    line-height: 1.5;
  }
  .task_btn {
    height: 54px;
    width: 100%;
    margin-top: 50px;
  }
}
</style>